<template>
  <ElButton
    :class="`${prefixCls} color-#fff`"
    v-bind="$props"
    :color="computedColor"
    :style="computedStyle"
    @click="handleClick"
  >
    <slot></slot>
    <slot name="icon"></slot>
    <slot name="loading"></slot>
  </ElButton>
</template>

<script>
import { computed, unref } from 'vue'
import { ElButton } from 'element-plus'
import { useAppStore } from '@/store/modules/app'
import { useDesign } from '@/hooks/web/useDesign'

export default {
  name: 'BaseButton',
  components: {
    ElButton
  },
  props: {
    size: String,
    type: {
      type: String,
      default: 'default'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plain: Boolean,
    text: Boolean,
    bg: Boolean,
    link: Boolean,
    round: Boolean,
    circle: Boolean,
    loading: Boolean,
    loadingIcon: [String, Object],
    icon: [String, Object],
    autofocus: Boolean,
    nativeType: {
      type: String,
      default: 'button'
    },
    autoInsertSpace: Boolean,
    color: {
      type: String,
      default: ''
    },
    darker: Boolean,
    tag: {
      type: [String, Object],
      default: 'button'
    }
  },
  emits: ['click'],
  setup(props, { emit }) {
    const appStore = useAppStore()
    const { getPrefixCls } = useDesign()
    const prefixCls = getPrefixCls('button')

    const computedColor = computed(() => {
      if (props.type === 'primary' && !props.link) {
        return unref(appStore.getTheme).elColorPrimary
      }
      return ''
    })

    const computedStyle = computed(() => {
      if (props.type === 'primary' && !props.link) {
        return '--el-button-text-color: #fff; --el-button-hover-text-color: #fff'
      }
      return ''
    })

    const handleClick = () => {
      emit('click')
    }

    return {
      prefixCls,
      computedColor,
      computedStyle,
      handleClick
    }
  }
}
</script>
